<template>
    <div>
      <!-- 头部 -->
      <div class="search-header">
        <!-- 后退按钮图标 -->
        <van-icon name="arrow-left" size="0.48rem" class="goback" @click="goback" />
        <!-- 搜索输入框 -->
        <van-search v-fofo background="#007BFF"
        shape="round"
        placeholder="请输入搜索关键词"
        v-model="keyValue"
        @input="inputFn"
        @search="searchFn"
        />
      </div>

      <!-- 搜索历史 -->
      <div class="search-history" v-if="!keyValue">
        <!-- 头部标题 -->
        <van-cell title="搜索历史">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #right-icon>
            <van-icon name="delete-o" class="search-icon" @click="delHistory"/>
          </template>
        </van-cell>
        <!-- 历史记录 -->
        <div class="history-list">
          <span class="history-item" v-for="(item,index) in localHistory"
          :key="index"
          @click="searchItemFn(item)"
          >{{item}}</span>
        </div>
      </div>

      <!-- 搜索建议列表 -->
      <div class="sugg-list" v-else>
        <!-- 匹配关键词的每一项 -->
        <div class="sugg-item" v-for="(item,index) in suggestList"
         :key="index"
         @click="searchItemFn(item)"
         v-html="lightFn(item,keyValue)"
         ></div>
      </div>
    </div>
</template>

<script>
import { searchArticle } from '@/api'
import { getStorage, setStorage } from '@/utils/Storage'
export default {
  name: 'mySearch',
  data () {
    return {
      // 搜索关键词
      keyValue: '',
      // 防抖用的定时器
      timer: null,
      // 存放联想菜单数组
      suggestList: [],
      // 本地的搜索历史记录
      localHistory: JSON.parse(getStorage('history')) || []
    }
  },

  methods: {
    // 点击返回按钮，退回到首页
    goback () {
      this.$router.back()
    },

    // 监听输入框的输入事件，需要做防抖处理
    inputFn () {
      // 如果关键词为空 清空数组
      if (this.keyValue === '') this.suggestList = []
      // 判断是否有定时器，有则清除定时器，没有的话不会执行 && 之后的语句
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        if (this.keyValue.length === 0) return
        // 发起请求
        const { data: res } = await searchArticle(this.keyValue)
        this.suggestList = res.data.options
        console.log(this.suggestList)
        console.log(this.keyValue)
      }, 500)
    },

    // 按下回车跳转传参, 其实在手机里面是没有回车的，它这里相当于是点击键盘上的搜索按钮
    searchFn () {
      if (this.keyValue.length > 0) {
        this.localHistory.push(this.keyValue)
        // 去重 set类数组转化为数组
        this.localHistory = [...new Set(this.localHistory)]
        // 立即覆盖式的保存到本地
        setStorage('history', JSON.stringify(this.localHistory))
        // 跳转后, 并未保存到本地(==原因: 先跳转了, watch还未来的及执行==)
        setTimeout(() => {
          this.$router.push(`/search/${this.keyValue}`)
        }, 0)
      }
    },

    // 点击单项菜单或点击历史记录，点击跳转传参
    searchItemFn (str) {
      if (str.length > 0) {
        this.localHistory.push(str)
        // 去重 set类数组转化为数组
        this.localHistory = [...new Set(this.localHistory)]
        // 立即覆盖式的保存到本地
        setStorage('history', JSON.stringify(this.localHistory))
        setTimeout(() => {
          this.$router.push(`/search/${str}`)
        }, 0)
      }
    },

    // 处理字符串关键词高亮效果
    /**
     * @originStr :原来字符串
     * @target :关键字
     * @return ：替换后的完整字符串
     */
    lightFn (originStr, target) {
      if (!originStr) return
      // return originStr.replaceAll(target, `<span style="color:red">${target}</span>`)

      // 使用变量作为正则表达式
      const reg = new RegExp(target, 'ig') // i忽略大小写  g全局匹配
      return originStr.replace(reg, (match) => {
        return `<span style="color:red">${match}</span>`
      })
    },

    // 点击清空历史记录按钮
    delHistory () {
      this.localHistory = []
    }

  }
}
</script>

<style lang="less" scoped>
.search-header{
  height: 54px;
  display: flex;
  align-items: center;
  background-color: #007BFF;
  .goback{
    color:#fff;
    margin-left:10px;
  }
  .van-search{
    flex:1;
  }
}
.search-history{
  .search-icon{
    font-size: 16px;
    line-height: inherit;
  }
  .history-list{
    padding: 0 10px;
    .history-item{
      display: inline-block;
      font-size: 12px;
      padding: 8px 14px;
      background-color: #efefef;
      margin: 10px 8px 0 8px;
      border-radius: 10px;
    }
  }
}
.sugg-list{
  .sugg-item{
    padding: 0 15px;
    border-bottom: 1px solid #e8e8e8;
    font-size: 14px;
    line-height: 45px;
    // 实现省略号
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
